<template>
  <div class="home">
    <h1>带分页的表格</h1>

    <el-table :data="currentPageData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="100" />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="age" label="年龄" width="100" />
      <el-table-column prop="address" label="地址" />
    </el-table>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from 'vue'

interface TableItem {
  id: number
  name: string
  age: number
  address: string
}

export default defineComponent({
  setup() {
    // 模拟数据
    const tableData = ref<TableItem[]>([
      { id: 1, name: '张三', age: 25, address: '北京市朝阳区' },
      { id: 2, name: '李四', age: 30, address: '上海市浦东新区' },
      { id: 3, name: '王五', age: 28, address: '广州市天河区' },
      { id: 4, name: '赵六', age: 35, address: '深圳市南山区' },
      { id: 5, name: '钱七', age: 22, address: '杭州市西湖区' },
      { id: 6, name: '孙八', age: 40, address: '南京市鼓楼区' },
      { id: 7, name: '周九', age: 32, address: '成都市武侯区' },
      { id: 8, name: '吴十', age: 27, address: '武汉市江汉区' },
      { id: 9, name: '郑十一', age: 29, address: '西安市雁塔区' },
      { id: 10, name: '王十二', age: 31, address: '重庆市渝中区' }
    ])

    const currentPage = ref(1)
    const pageSize = ref(5)

    // 计算当前页显示的数据
    const currentPageData = computed(() => {
      const start = (currentPage.value - 1) * pageSize.value
      const end = start + pageSize.value
      return tableData.value.slice(start, end)
    })

    const handleSizeChange = (size: number) => {
      pageSize.value = size
      currentPage.value = 1
    }

    const handleCurrentChange = (page: number) => {
      currentPage.value = page
    }

    return {
      tableData,
      currentPage,
      pageSize,
      currentPageData,
      handleSizeChange,
      handleCurrentChange
    }
  }
})
</script>

<style scoped>
.home {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}
.el-pagination {
  margin-top: 20px;
  justify-content: center;
}
</style>